<template>
  <div class="dashboard-container">
    <div class="left">
      <el-timeline class="padding0">
        <el-timeline-item>
          <el-card class="box-card">
            <el-link :underline="false" class="linkFont" @click="getAllStudents">查看所有数据 &nbsp;&nbsp;<svg-icon icon-class="eye-open" /></el-link>
          </el-card>
        </el-timeline-item>
        <el-timeline-item>
          <el-card class="box-card">
            <el-link :underline="false" class="linkFont" @click="dialogFormVisible = true">新增学生信息 &nbsp;&nbsp;<i class="el-icon-circle-plus-outline" /></el-link>
          </el-card>
        </el-timeline-item>
        <el-timeline-item>
          <el-card class="box-card">
            <el-link :underline="false" class="linkFont">查找学生 &nbsp;&nbsp;<i class="el-icon-search" /></el-link>
            <el-form ref="searchForm" :model="searchForm" label-width="80px" inline label-position="top" :rules="rules1">
              <el-form-item label="根据学生姓名查找" prop="stuName">
                <el-input v-model="searchForm.stuName" style="width: 60%" placeholder="输入学生姓名" />
                <el-button type="primary" icon="el-icon-search" style="float: right" @click="searchStudent"> 搜索</el-button>
              </el-form-item>
              <el-form-item label="根据学生学号查找" prop="stuNum">
                <el-input v-model="searchForm.stuNum" style="width: 60%" placeholder="输入学生学号" />
                <el-button type="primary" icon="el-icon-search" style="float: right" @click="searchStudentByNum"> 搜索</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="right">
      <el-table
        v-loading="listLoading"
        :data="studentList"
        height="600"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="collegeId"
          label="院系编号"
        />
        <el-table-column
          prop="stuNum"
          label="学号"
          align="center"
        />
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
        />
        <el-table-column
          prop="gender"
          label="性别"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.gender | genderFilter">{{ scope.row.gender==='m'?'男':'女' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="学生类型"
          align="center"
        />
        <el-table-column
          prop="joinTime"
          label="入学日期"
          align="center"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{   formatMyTime(scope.row.joinTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="comeFrom"
          label="籍贯"
          align="center"
        />
        <el-table-column
          prop="IDCRAD"
          label="身份证号"
          align="center"
        />
        <el-table-column
          prop="address"
          label="详细地址"
        />
        <el-table-column
          prop="birthTime"
          label="出生日期"
          align="center"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{   formatMyTime(scope.row.birthTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="subject"
          label="所学专业"
          align="center"
        />
        <el-table-column
          prop="Nation"
          label="民族"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="电话(家)"
          align="center"
        />
        <el-table-column
          prop="totalPayment"
          label="缴费总计"
          align="center"
        />
        <el-table-column
          prop="RequiredRate"
          label="所需房费"
          align="center"
        />
        <el-table-column
          prop="note"
          label="备注"
        />
        <el-table-column
          width="150"
          fixed="right"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-popconfirm
              title="确定删除吗？"
              @onConfirm="handleDelete(scope.$index, scope.row)"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增学生信息" :visible.sync="dialogFormVisible">
      <el-form ref="myForm" :model="editableStudent" :rules="rules2" label-width="80px" label-position="left" class="editForm">
        <el-form-item label="院系编号" prop="collegeId">
          <el-input v-model="editableStudent.collegeId" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="学号" prop="stuNum">
          <el-input v-model="editableStudent.stuNum" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editableStudent.name" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio v-model="editableStudent.gender" label="m">男</el-radio>
          <el-radio v-model="editableStudent.gender" label="w">女</el-radio>
        </el-form-item>
        <el-form-item label="学生类型" prop="type">
          <el-input v-model="editableStudent.type" />
        </el-form-item>
        <el-form-item label="入学日期" prop="joinTime">
          <el-date-picker
            v-model="editableStudent.joinTime"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="籍贯" prop="comeFrom">
          <el-input v-model="editableStudent.comeFrom" />
        </el-form-item>
        <el-form-item label="身份证号" prop="IDCRAD">
          <el-input v-model="editableStudent.IDCRAD" />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="editableStudent.address" />
        </el-form-item>
        <el-form-item label="出生日期" prop="birthTime">
          <el-date-picker
            v-model="editableStudent.birthTime"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="所学专业" prop="subject">
          <el-input v-model="editableStudent.subject" />
        </el-form-item>
        <el-form-item label="民族" prop="Nation">
          <el-input v-model="editableStudent.Nation" />
        </el-form-item>
        <el-form-item label="电话(家)" prop="phone">
          <el-input v-model="editableStudent.phone" />
        </el-form-item>
        <el-form-item label="缴费总计" prop="totalPayment">
          <el-input v-model="editableStudent.totalPayment" />
        </el-form-item>
        <el-form-item label="所需房费" prop="RequiredRate">
          <el-input v-model="editableStudent.RequiredRate" />
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="editableStudent.note" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmForm('myForm')">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { findAllStuInfo, selectStuInfoById, selectStuInfoByName, deleteStuInfo, updateStuInfoById, addStuInfo } from '@/api/student'
export default {
  name: 'Dashboard',
  filters: {
    genderFilter(gender) {
      const statusMap = {
        woman: 'success',
        m: 'danger'
      }
      return statusMap[gender]
    }
  },
  data() {
    var validateMonney = (rule, value, callback) => {
      if (!isNaN(value)) {
        callback()
      } else {
        callback(new Error('请正确输入金额！'))
      }
    }
    var validateIDCRAD = (rule, value, callback) => {
      const regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!regIdCard.test(value)) {
        callback(new Error('请正确身份证号码！'))
      } else {
        callback()
      }
    }
    return {
      studentList: [],
      editableStudent: {
        joinTime: 0,
        birthTime: 0
      },
      searchForm: {
        stuName: '',
        stuNum: ''
      },
      dialogFormVisible: false,
      isEdit: false,
      listLoading: false,
      rules1: {
        stuName: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' }
        ],
        stuNum: [
          { required: true, message: '请输入学生学号', trigger: 'blur' }
        ]
      },
      rules2: {
        collegeId: [
          { required: true, message: '请输入院系编号', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        stuNum: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请输入性别', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入学生类型', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        joinTime: [
          { type: 'date', required: true, message: '请输入入学日期', trigger: 'blur' }
        ],
        comeFrom: [
          { required: true, message: '请输入籍贯', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        IDCRAD: [
          { validator: validateIDCRAD, trigger: 'blur', required: true }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        birthTime: [
          { type: 'date', required: true, message: '请输入出生日期', trigger: 'blur' }
        ],
        subject: [
          { required: true, message: '请输入所学专业', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        Nation: [
          { required: true, message: '请输入民族', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话(家)', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        RequiredRate: [
          { validator: validateMonney, trigger: 'blur', required: true }
        ],
        totalPayment: [
          { validator: validateMonney, trigger: 'blur', required: true }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    dialogFormVisible(n, o) {
      if (!n) {
        this.editableStudent = {}
        this.isEdit = false
      }
    }
  },
  created() {
    this.getAllStudents()
  },
  methods: {
    getFormatDate(date) {
      const fillZero = function(num) {
        return num < 10 ? '0' + num : num
      }
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      // const hour = date.getHours()
      // const minute = date.getMinutes()
      // const second = date.getSeconds()
      return `${year}-${fillZero(month)}-${fillZero(day)}`
    },
    formatMyTime(date, op) {
      const d = new Date(date)
      return (
        d.getFullYear() +
        '年' +
        (d.getMonth() + 1) +
        '月' +
        d.getDate() +
        '日'
      )
    },
    getAllStudents() {
      this.listLoading = true
      findAllStuInfo().then(res => {
        this.dialogFormVisible = false
        this.studentList = res.data.students
        this.listLoading = false
      })
    },
    confirmForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            this.updateStudent()
          } else {
            this.addNewStudent()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    updateStudent() {
      let data = this.editableStudent
      data.joinTime = this.getFormatDate(new Date(data.joinTime))
      data.birthTime = this.getFormatDate(new Date(data.birthTime))
      updateStuInfoById(data).then(res => {
        this.getAllStudents()
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success'
        })
      })
    },
    addNewStudent() {
      let data = this.editableStudent
      data.joinTime = this.getFormatDate(new Date(data.joinTime))
      data.birthTime = this.getFormatDate(new Date(data.birthTime))
      addStuInfo(data).then(res => {
        this.getAllStudents()
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success'
        })
      })
    },
    searchStudent() {
      this.listLoading = true
      selectStuInfoByName({ name: this.searchForm.stuName }).then(res => {
        this.studentList = res.data.student
        this.listLoading = false
      })
    },
    searchStudentByNum() {
      this.listLoading = true
      selectStuInfoById({ id: this.searchForm.stuNum }).then(res => {
        let array = []
        array.push(res.data.student)
        this.studentList = array
        this.listLoading = false
      })
    },
    handleEdit(index, row) {
      this.editableStudent = row
      this.isEdit = true
      this.dialogFormVisible = true
    },
    handleDelete(index, row) {
      deleteStuInfo({ id: row.stuNum }).then(res => {
        this.getAllStudents()
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 10px;
      min-width: 1280px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .left{
    width: 23%;
    min-width: 330px;
    text-align: center;
    float: left;
    font-weight: 700;
  }
  .right{
    float: left;
    margin-left: 3%;
    width: 71%;
  }
  .padding0{
    padding: 0;
  }
  .linkFont{
    font-weight: 700;
  }
  .editForm{
    width: 400px;
  }
  /deep/
  .el-form-item__label{
    float: left;
    font-weight: 500;
  }
</style>
